'use client'


import { addReminder, getReminder, updateReminder } from "@/clientApi/task/reminder";
import { globalMessage } from "@/utils/message";
import { ClockCircleOutlined, DoubleLeftOutlined } from "@ant-design/icons";
import { Button, Form, FormProps, Input, Radio, RadioChangeEvent } from "antd";
import { useEffect, useState } from "react";
import dayjs from "dayjs";
type FieldType = {
    description?: string;
};
const List = [{
    key: '1',
    label: '选择',
}, {
    key: '2',
    label: '设置',
}];
const RadioOptions = [
    {
        label: <div>'30分钟后</div>,
        value: '1',
    },
    {
        label: '4小时之后',
        value: '2',
    },
    {
        label: '明天9点',
        value: '3',
    },
    {
        label: '本周日',
        value: '4',
    },
    {
        label: '下周一',
        value: '5',
    },
]
const ReminderView: React.FC<{ handleSaveReminded: (data: any) => void; handleCancle: () => void; noteId: string, reminderId: string }> = ({ handleSaveReminded, handleCancle, noteId, reminderId }) => {

    useEffect(() => {
        if (reminderId) {
            // 编辑逻辑待补充
            loadList();
        }
    }, [reminderId]);
    const [dataTime, setDataTime] = useState<any>({});
    const loadList = () => {
        getReminder(reminderId).then((res: any) => {
            if (res?.code === 200) {

            }
        });
    };
    const onFinish: FormProps<FieldType>['onFinish'] = (values) => {
        console.log('Success:', values);
        const data = {
            description: values.description,
            noteId: noteId,
        }
        if (reminderId !== null && reminderId !== undefined && reminderId !== '') {
            updateReminder({ reminderId, ...data }).then((res: any) => {
                console.log("res", res)
                if (res.code == 200) {
                    globalMessage().success(res.msg)
                }
            })
        } else {
            addReminder(data).then((res: any) => {
                console.log("res", res)
                if (res.code == 200) {
                    globalMessage().success(res.msg)
                }

            })
        }
        handleCancle();

    };


    const onChange = (e: RadioChangeEvent) => {
        setSelectTime(e.target.value);
    };

    const [tag, setTag] = useState<string>('1');
    const [selectTime, setSelectTime] = useState<string>('1');

    const handleSave = () => {
        const now = dayjs();
        let targetTime: dayjs.Dayjs;

        switch (selectTime) {
            case '1': // 30分钟后
                targetTime = now.add(30, 'minute');
                break;
            case '2': // 4小时之后
                targetTime = now.add(4, 'hour');
                break;
            case '3': // 明天9点
                targetTime = now.add(1, 'day').hour(9).minute(0).second(0).millisecond(0);
                break;
            case '4': // 本周日
                targetTime = now.day(7).hour(9).minute(0).second(0).millisecond(0);
                break;
            case '5': // 下周一
                targetTime = now.day(8).hour(9).minute(0).second(0).millisecond(0);
                break;
            default:
                targetTime = now;
                break;
        }

        // 使用 dayjs 格式化时间
        const formattedTime = targetTime.format('YYYY-MM-DD HH:mm:ss');
        const data: {
            noteId: string;
            firstRemindTime: string | null;
            nextRemindTime: string | null;
        } = {
            noteId: noteId,
            firstRemindTime: formattedTime,
            nextRemindTime: null,
        }
        if (tag == '1') {
            data.nextRemindTime = formattedTime;
        } else {
            data.firstRemindTime = formattedTime;
        }
        if (reminderId !== null && reminderId !== undefined && reminderId !== '') {
            updateReminder({ reminderId, ...data }).then((res: any) => {
                console.log("res", res)
                if (res.code == 200) {
                    globalMessage().success(res.msg)
                }
            })
        } else {
            addReminder(data).then((res: any) => {
                console.log("res", res)
                if (res.code == 200) {
                    globalMessage().success(res.msg)
                }

            })
        }
        setDataTime({
            firstRemindTime: formattedTime
        })
        console.log("保存提醒时间", targetTime.toDate(), formattedTime);
    };
    return (

        <div className="bg-[#808080]  ">
            <div className="p-4">

                <div className="w-full bg-amber-50">
                    <div className="flex w-full justify-around bg-[#909090] gap-1">
                        {List.map((item, index) => (
                            <div onClick={() => { setTag(item.key) }} key={item.key} className={`${item.key == tag ? 'text-[#e11a25]' : 'text-[#a9a9a9]'}  ${index < List.length - 1 ? 'border-r border-gray-500' : ''}  p-2   text-center w-1/2 select-none`} >
                                {item.label}
                            </div>
                        ))}
                    </div>
                    {tag == '1' ? <div className="pl-2 pr-2" >
                        {/* 选择 */}
                        <Radio.Group
                            vertical
                            onChange={onChange}
                            value={selectTime}
                            options={[
                                { label: '30分钟后', value: '1' },
                                { label: '4小时之后', value: '2' },
                                { label: '明天9点', value: '3' },
                                { label: '本周日', value: '4' },
                                { label: '下周一', value: '5' },
                            ]} />

                    </div> : <div>
                        {/* 设置 */}
                    </div>}
                    <div> <Button type="primary" onClick={() => { handleSave() }}>保存</Button></div>
                </div>
            </div>
        </div>




    )

}
export default ReminderView;